<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    
</body>
<script>
    
    // 提前绑定
        // 给固定的事件绑定事件处理函数

    // 将来触发
        // 执行事件对应的事件处理函数


    // 事件容器
        // 事件名：事件处理函数，事件处理函数，事件处理函数
        // ...

    // 事件容器，找到事件名，发出执行命令，自动执行自身对应的事件处理函数


    // 事件容器
    var eventBox = {
        // abc:[ f1, f2 ],
        // qwe:[ f4 ]
    }

    // 绑定事件
    function add(type, cb){
        // 判断事件容器中是否存在当前事件
        if(eventBox[type]){
            // 存在，在原有事件处理函数的基础上增加新事件处理函数
            eventBox[type].push( cb );
        }else{
            // 不存在，以数组的形式直接添加事件处理函数
            eventBox[type] = [ cb ];
        }
    }

    add("abc", f1)
    add("abc", f2)

    add("qwe", f1)
    add("qwe", f3)
    add("qwe", f4)
    add("qwe", f1)
    
    function remove(type, cb){
        // 删除之前，先判断事件容器中是否存在该事件。不存在，直接结束
        if(!eventBox[type]) return;
        // 遍历该事件的所有事件处理函数
        eventBox[type].some(function(val, idx, arr){
            // 判断遍历出的事件处理函数，是否是要删除的事件处理函数
            if(val === cb){
                // 是，删除
                arr.splice(idx, 1);
                // 结束遍历
                return true;
            }
        })
    }
    // remove("abc", f1)
    // remove("qwe", f1)
    // remove("qwe", f1)
    
    function emit(type){
        // 触发之前，先判断事件容器中是否存在该事件。不存在，直接结束
        if(!eventBox[type]) return;
        // 遍历该事件的所有事件处理函数
        eventBox[type].forEach(function(val){
            // 执行
            val();
        })
    }
    emit("abc");
    emit("qwe");

    console.log(eventBox)

    
    function f1(){
        console.log(1)
    }
    function f2(){
        console.log(2)
    }
    function f3(){
        console.log(3)
    }
    function f4(){
        console.log(4)
    }








    
</script>
</html>